<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
          + request.getServerName() + ":" + request.getServerPort()
          + path + "/";
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <%--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">--%>
  <%--<meta content="yes" name="apple-mobile-web-app-capable">--%>
  <%--<meta content="black" name="apple-mobile-web-app-status-bar-style">--%>
  <%--<meta content="telephone=no" name="format-detection">--%>
    <title>对比记录</title>
  <link rel="stylesheet" type="text/css" href="<%=basePath%>css/easyui.css" />
  <link rel="stylesheet" type="text/css" href="<%=basePath%>css/icon.css" />
  <script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
  <script type="text/javascript" src="<%=basePath%>js/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="<%=basePath%>js/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="<%=basePath%>js/json2.js"></script>
</head>
<body>
<div id="main" class="easyui-layout" fit="true">
  <div id="center" region="center" style="background:#eee; overflow:hidden;border:0px;">
    <table toolbar="#div_toolbar" id="recordGrid" fitColumns="true" fit="true"  style="width:auto;height:100%"></table>
  </div>
</div>
<div id="record-win" class="easyui-window" title="对比结果查看" style="width:800px;height:500px; background-color:#D8ECFE;"
     data-options="modal:true,footer:'#footer'">
  <div id="main-win" class="easyui-layout" fit="true">
      <table toolbar="#div_toolbar" id="recordGrid-win" fitColumns="true" fit="true"  style="width:auto;height:100%;"></table>
  </div>
</div>
</body>
<script type="text/javascript">
  var offset = 1;
  var limit = 25;
  var uuid,total;
  $(function (){
    $("#record-win").window("close");
    dataGrid = $('#recordGrid').datagrid({//表格数据
      singleSelect:true,
      pagination:true,
      nowrap:false,
      url:'<%=basePath%>compare/findRecord?newDate='+new Date(),//
      queryParams:{page:offset,rows:limit},
      columns:[[
        {field:'ck',checkbox:true},
        {field:'id',title:'标示',hidden:true,align:'center',sortable:true},
        {field:'operationip',title:'操作IP',align:'center',width:'19%',sortable:true},
        {field:'descs',title:'记录描述',align:'center',width:'40%',resizable:true},
        {field:'userId',title:'操作人',align:'center',width:'16%',sortable:true},
        {field:'createtime',title:'创建时间',align:'center',width:'21%',resizable:true},
        {field:'~',title:'操作',align:'center',resizable:true,formatter:function(value,rowData,rowIndex){
          return '<a href="#" data-id="'+rowData.id+'" onclick="compareClick(this)">查看对比</a>';
        }}
      ]],
      toolbar:[{
        text:'刷新',
        iconCls:'icon-reload',
        handler:function(){
          dataGrid.datagrid('load',{});
        }
      }]
    });
    //grid的分页信息
    $('#recordGrid').datagrid('getPager').pagination({//分页对象
      pageSize: 25,
      beforePageText: '第',
      afterPageText: '页    共 {pages} 页',
      displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
      pageList:[25,50,75,100,150]
    });

  });

  function compareClick(e){
    console.log($(e).attr('data-id'))
    uuid = $(e).attr('data-id');
    $.ajax({
      url:"<%=basePath%>compare/getCompareRecord",
      type:"POST",
      data:{id:uuid},
      success:function(res){

        if(res.code == 0){
          $("#record-win").window("open");
          total = res.data.total;
          var column = (buildingColumn(res.data.columnListMap));

          $("#recordGrid-win").datagrid({
            singleSelect: true,
            pagination : true,
            rownumbers:true,
            nowrap:false,
            showRefresh:false,
            fitColumns :false,
            columns:column,
          });

          $("#recordGrid-win").datagrid("loadData", res.data.recordListMap);
          $('#recordGrid-win').datagrid('getPager').pagination({//分页对象
            pageSize: 25,
            total: total,
            pageNumber: 1,
            pageList:[25],

            onSelectPage : function(pageNumber, pageSize) {
              var param ={page:pageNumber,limit:pageSize,uuid:uuid}
              loadPages(param);
            }
          });
        } else {
          $.messager.show({
            title:'提示',
            width:250,
            height:140,
            msg:res.message
          });
        }
      }
      ,error: function (error) {
        $.messager.show({
          title:'提示',
          width:250,
          height:140,
          msg:"系统繁忙，请稍后再试！"
        });
      }
    });
  }

  /**组装动态列数据**/
  function buildingColumn(data){

    var columns = [];
    columns.push({field:'ck',checkbox:true});
    for(var i = 0;i < data.length;i++){
      if(data[i] == 'split_column'){
        var column = {"field":data[i],"title":" ","width":"3px","align":"center",styler:function(value,rowData,rowIndex){
          return "background:#000";
        }}
      } else {
        if(data[i].indexOf("tgt_") != -1){

          var column = {"field":data[i],"title":data[i],"align":"center","sortable":true,
            styler:function(value,rowData,rowIndex){

              var other_val = rowData[this.field.replace("tgt_","")];

              if(value != other_val ){
                return "background:#2ddada;";
              }

            }
          };

        } else {
          var column = {"field":data[i],"title":"src_" + data[i],"align":"center","resizable":true,"sortable":true,
            styler:function(value,rowData,rowIndex){

              var other_val = rowData['tgt_'+this.field];

              if(value != other_val ){
                return "background:#2ddada;";
              }

            }
          };
        }
      }
      columns.push(column);
    }

//    console.log(JSON.stringify(columns));

    return [columns];
  }

  /**分页加载对比记录数据**/
  function loadPages(param){
    $.ajax({
      url:'<%=basePath%>compare/loadPages',
      type:'post',
      data:param,
      success:function (res){
        console.log(res)
        $('#recordGrid-win').datagrid({
          data:res.data
        });
        $('#recordGrid-win').datagrid("loaded");
        $('#recordGrid-win').datagrid('getPager').pagination({//分页对象
          pageSize: 25,
          total: total,
          pageNumber: param.page,
          pageList:[25],
          onSelectPage : function(pageNumber, pageSize) {
            var param ={page:pageNumber,limit:pageSize,uuid:uuid};
            loadPages(param);
          }
        });
      }
    });
  }

  /**
   *获取分页数据
   * @param params
   */
  function getDataSource(params){
    $.ajax({
      url:'<%=basePath%>compare/findRecord',
      type:'POST',
      data:params,
      success:function(res){
        return res;
      }
    });
  }


</script>
</html>
